<template>
  <!-- 头部组件 -->
  <Header msg="头部分" @refreshParent="refreshParent" class="fixed-header" />
  <div ref="targetDiv" class="ycnz">
    <div class="member-center dark_bgcolor2">
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
            <el-menu-item index="1">
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>个人信息</span>
            </el-menu-item>
            <el-menu-item index="3">
              <el-icon>
                <Lock />
              </el-icon>
              <span>修改密码</span>
            </el-menu-item>
            <el-menu-item index="7">
              <el-icon>
                <Document />
              </el-icon>
              <span>作品管理</span>
            </el-menu-item>            
            <el-menu-item index="4">
              <el-icon>
                <Document />
              </el-icon>
              <span>配音记录</span>
            </el-menu-item>
            <el-menu-item index="5">
              <el-icon>
                <Document />
              </el-icon>
              <span>文案提取记录</span>
            </el-menu-item>
            <el-menu-item index="6">
              <el-icon>
                <Document />
              </el-icon>
              <span>字幕生成记录</span>
            </el-menu-item>
            <el-menu-item index="8">
              <el-icon>
                <Document />
              </el-icon>
              <span>消费记录</span>
            </el-menu-item>            
          </el-menu>
        </el-aside>
        <el-main>
          <component :is="currentComponent"></component>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, shallowRef, defineComponent, onMounted } from 'vue';
import { UserFilled, Wallet, Lock, Document } from '@element-plus/icons-vue';
import Footer from '../components/footer.vue';
import Header from '../components/header.vue';
import PersonalInfo from '../MemberCenter/PersonalInfo.vue';
import Balance from '../MemberCenter/Balance.vue';
import ChangePassword from '../MemberCenter/ChangePassword.vue';
import DubbingRecord from '../MemberCenter/DubbingRecord.vue';
import ExtractRecord from '../MemberCenter/ExtractRecord.vue';
import CaptionRecord from '../MemberCenter/CaptionRecord.vue';
import WorksLibrary from '../MemberCenter/WorksLibrary.vue';
import Consumption from '../MemberCenter/Consumption.vue';


export default defineComponent({
  components: {
    Footer,
    Header,
    PersonalInfo,
    Balance,
    ChangePassword,
    DubbingRecord,
    ExtractRecord,
    CaptionRecord,
    WorksLibrary,
    Consumption
  },
  setup() {
    const currentComponent = shallowRef(PersonalInfo);
    const targetDiv = ref(null);

    // 密码
    const inputPassword = ref('');
    // 手机号码
    const inputMobile = ref('');
    // 验证码
    const Verificationcode = ref('');

    // 获取 cookie
    function getCookie(name: string) {
      const nameEQ = name + "=";
      const ca = document.cookie.split(';');
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.startsWith(nameEQ)) return c.substring(nameEQ.length);
      }
      return null;
    }
    // 初始化时设置默认主题
    onMounted(() => {
      const user = getCookie('nightMode');
      if (user == "") {
        targetDiv.value.className = "light";
      } else {
        targetDiv.value.className = user;
      }
    });

    function refreshParent() {
      const user = getCookie('nightMode');
      if (user == "") {
        targetDiv.value.className = "light";
      } else {
        targetDiv.value.className = user;
      }
    };

    const handleSelect = (key: string) => {
      switch (key) {
        case '1':
          currentComponent.value = PersonalInfo;
          break;
        case '2':
          currentComponent.value = Balance;
          break;
        case '3':
          currentComponent.value = ChangePassword;
          break;
        case '4':
          currentComponent.value = DubbingRecord;
          break;
        case '5':
          currentComponent.value = ExtractRecord;
          break;
        case '6':
          currentComponent.value = CaptionRecord;
          break;
          case '7':
          currentComponent.value = WorksLibrary;
          break;       
          case '8':
          currentComponent.value = Consumption;
          break;                
      }
    };

    return {
      currentComponent,
      handleSelect,
      UserFilled,
      Wallet,
      Lock,
      targetDiv,
      refreshParent,
      inputPassword,
      inputMobile,
      Verificationcode,
      DubbingRecord,
      ExtractRecord,
      CaptionRecord,
      WorksLibrary,
      Consumption
    };
  }
});
</script>

<style scoped>
.member-center {
  width: 80%;
  margin-left: 10%;
  margin-top: 90px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-menu-vertical-demo {
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* background-color: #ffffff; 设置 el-menu 的背景色与 el-main 一致 */
}

.el-aside {
  /* background-color: #f0f2f5; */
}

.el-main {
  padding: 20px;
  /* background-color: #ffffff; 确保 el-main 的背景色为白色 */
}
</style>